<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-05
 * tabActive.vue
-->
<template>
  <view
    v-if="activeData && activeData.length"
    style="
      background-image: url('https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/bg_bg_20250321154307A003.png');
      background-size: cover;
      padding-top: 86rpx;
      width: 95%;
      height: 40%;
      margin: 0 auto;
    "
  >
    <view class="cf bgf pd-2 mgb-2 active-detail border-radius" v-for="(item, index) of activeData" :key="index">
      <view @click="handleLink(item.id, item)" style="margin: 0 auto; background-color: #ffffff; padding: 10rpx; display: flex; align-items: center">
        <image style="width: 141rpx; height: 141rpx; margin: 10px; border-radius: 10rpx" :src="imgurl + item.icon"> </image>
        <view style="width: calc(100% - 180rpx)">
          <p>{{ item.name }}</p>
          <view style="display: flex; align-items: center; justify-content: space-between">
            <view class="">
              <p style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #808080; line-height: 33rpx; text-align: left; font-style: normal">
                已售{{ item.soldNum }}
              </p>
              <p style="margin-top: 10px" v-if="item.price > 0">
                <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #f86315; line-height: 33rpx; text-align: left; font-style: normal">抢购价</span>
                <span style="font-family: DIN, DIN; font-weight: bold; font-size: 32rpx; color: #f86316; line-height: 39rpx; text-align: left; font-style: normal">￥{{ item.price }}</span>
              </p>
            </view>
            <view style="display: flex; align-items: end" class="dib pd tar dis-f align-end" v-if="item.price > 0 && seeButton">
              <view class="">
                <button
                  style="
                    height: 52rpx;
                    background: linear-gradient(90deg, #ff5e0b 0%, #ff7c02 100%);
                    border-radius: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  抢购
                </button>
              </view>
            </view>
            <view style="display: flex; align-items: end" class="dib pd tar dis-f align-end" @click="xiangqing(item.id, item.isLaundry)" v-else>
              <view class="">
                <button
                  style="
                    height: 52rpx;
                    background: linear-gradient(90deg, #ff7c02 0%, #ff5e0b 100%);
                    border-radius: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  详情
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
    <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
    <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无活动</span>
  </view>
</template>

<script>
import { IMG_URL } from "../../../config/index";
import { getUserInfo } from "../../../utils/request_api.js"; /* 登录界面挪动接口 */
export default {
  data() {
    return {
      imgurl: IMG_URL,
    };
  },

  props: {
    yaoiqngID: {
      type: String,
      default: "",
    },
    userType: {
      type: String,
      default: "",
    },
    iddd: {
      type: String,
      default: "",
    },

    seeButton: {
      type: Boolean,
      default: "",
    },

    activeData: {
      type: Array,
      default: () => [],
    },
    /** 商户id */
    businessId: {
      type: String,
      default: "",
    },
    shareMerIdBack: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  methods: {
    async handleLink(id, item) {
      console.log("🚀 ~ handleLink ~ item:", item);
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();

              if (this.iddd == 10086) {
                /* 新水卡规则 */
                uni.setStorageSync("iddd", this.iddd);
                uni.setStorageSync("ebMerId", this.yaoiqngID);
                uni.setStorageSync("userType", 3);
                uni.setStorageSync("businessId", this.businessId);
                uni.setStorageSync("yaoiqngID", this.yaoiqngID);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.setStorageSync("ebMerId", this.shareMerIdBack);
                uni.setStorageSync("userType", "1");
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
      } else {
        uni.navigateTo({
          url:
            "/pages_h5/local_life/detailIndex?id=" +
            id +
            "&businessId=" +
            this.businessId +
            "&isLaundry=" +
            item.isLaundry +
            "&iddd=" +
            this.iddd +
            "&userType=" +
            this.userType +
            "&yaoiqngID=" +
            this.yaoiqngID,
        });
      }
    },
    async xiangqing(id, item) {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();

              if (this.iddd == 10086) {
                /* 新水卡规则 */
                uni.setStorageSync("iddd", this.iddd);
                uni.setStorageSync("ebMerId", this.yaoiqngID);
                uni.setStorageSync("userType", 3);
                uni.setStorageSync("businessId", this.businessId);
                uni.setStorageSync("yaoiqngID", this.yaoiqngID);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.setStorageSync("ebMerId", this.shareMerIdBack);
                uni.setStorageSync("userType", "1");
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
      } else {
        uni.navigateTo({
          url:
            "/pages_h5/local_life/detailIndex?id=" +
            id +
            "&businessId=" +
            this.businessId +
            "&isLaundry=" +
            item.isLaundry +
            "&iddd=" +
            this.iddd +
            "&userType=" +
            this.userType +
            "&yaoiqngID=" +
            this.yaoiqngID,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.active-detail {
  .active-detail-title {
    font-weight: 500;
  }

  .active-detail-price {
    font-family: DIN, DIN;
    font-weight: bold;
    color: #f86315;
  }

  .active-detail-btn {
    min-width: 136rpx;
    height: 64rpx;
  }

  .active-detail-contnet {
    width: calc(100% - 180rpx);
  }
}
</style>
